<template>
  <div class="changeinp">
    <van-sticky>
      <div class="search-top">
        <p class="btn-new" @click="getBack">
          <img src="../assets/Return.png" alt="" />
        </p>
        <van-search
          v-model="value"
          show-action
          left="地址"
          placeholder="请输入搜索关键词"
          shape="round"
          @focus="onPack"
        >
          <template #action>
            <div class="btn-search">搜索</div>
          </template>
        </van-search>
      </div>
    </van-sticky>

    <div class="type">
        <!-- <van-sticky :offset-top="54">
      <van-dropdown-menu>
        <van-dropdown-item v-model="active" :options="option" />
        <van-dropdown-item v-model="active" :options="option2" />
        <van-dropdown-item title="筛选" ref="item">
          <van-cell center title="包邮">
            <template #right-icon>
              <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <van-cell center title="团购">
            <template #right-icon>
              <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
            </template>
          </van-cell>
          <div style="padding: 5px 16px">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
        </van-sticky> -->
    </div>

    <div class="list-title">书城</div>

    <div class="content-item">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <!-- <van-cell v-for="(item,index) in list" :key="index"> -->
        <van-cell v-for="(item, index) in list" :key="index" @click="gotoDetail({id:item.bookId,title:item.title})">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <div class="custom-title">
              <div class="left-img">
                <img class="thumb" :src="item.cover" alt="" />
              </div>
              <div class="label-right">
                <span class="title">{{ item.title }}</span>
                <div class="author">
                  <span>{{ item.author + "/" + item.category }}</span>
                </div>
                <p class="test-desc2">{{ item.summary }}</p>
              </div>
            </div>
          </template>
        </van-cell>
      </van-list>

      <!-- </van-pull-refresh> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "changeinp",
  data() {
    return {
      value: "",
      value2: "",
      //列表数据
      list: [],
      page: 0,
      loading: false,
      finished: false,
      page_size: 10,
      total: 0,
      error: false,
      //分页的数据
      num: 2,
      //筛选栏的数据
      active: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: "综合排序", value: 0 },
        { text: "销量最高", value: 1 },
        { text: "人气最旺", value: 2 },
        { text: "最近更新", value: 3 },
        { text: "最近更新", value: 4 },
      ],
      option2: [
        { text: "全部频道", value: 0 },
        { text: "男生", value: 1 },
        { text: "女生", value: 2 },
        { text: "出版", value: 3 },
      ],
    };
  },
  created() {
    let inpVal = this.$route.params.value;
    this.value2 = inpVal;
    //   this.onLoad();
    // console.log(inpVal);
    this.getListData();
  },
  methods: {
    getBack() {
      this.$router.go(-1);
    },
    onPack() {
      this.$router.go(-1);
    },
    onLoad() {
      let timer = setTimeout(() => {
        this.getListData();
        this.page++;
        this.finished && clearTimeout(timer);

      }, 100);
    },

    onConfirm() {
      this.$refs.item.toggle();
    },
    gotoDetail(obj) {
      // console.log(title);
      this.$router.push({name:"BookDetail",params:{id:obj.id,title:obj.title}})
    },
    getListData() {
      this.axios({
        methods: "get",
        url: `search/book.json`,
        params: {
          keyword: this.value2,
          page: this.page,
        },
      })
        .then((result) => {
          
          let arr = result.data.data.books;
          // console.log(arr);
          if (arr.length === 0) {
            this.list = [];
            this.finished = true;
          }
          this.total = arr.total;
          this.list.push(...arr);
          this.loading = false;
          if (this.list.length >= arr.total) {
            this.finished = true;
          }
        
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.search-top {
  background-color: white;
  .btn-new {
    display: inline-block;
    float: left;
    font-size: 24px;
    margin-top: 15px;
    margin-left: 5px;
    color: #ccc;
    height: 10px;
    img {
      width: 20px;
    }
  }
}
.btn-search {
  color: #e4393c;
}
/deep/.van-ellipsis {
  font-size: 13px;
}
.list-title {
  padding: 5px 5px;
}
.thumb {
  width: 80px;
  height: 100px;
  background-color: #f8f8f8;
}
.custom-title {
  display: flex;
}
.label-right {
  margin-left: 5px;
  .author {
    margin-top: 5px;
    font-size: 12px;
    color: Gray;
  }
  .title {
    font-size: 14.5px;
    color: #000;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.test-desc2 {
  width: 250px;
  height: 45px;
  color: Gray;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10px;
}
</style>